<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state简写方式</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types，用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Lss extends React.Component {

            // 简写方式写内部，且使用static关键字
            static propTypes = { // 定义props传参规则，指定类型
                // 这种写法对顺序也有要求
                name: PropTypes.string.isRequired, // 指定名字必须传递且是字符串类型，不传递就报错
                sex: PropTypes.string, // 指定性别是字符串类型，且有默认值，默认值在下面
                age: PropTypes.number.isRequired, // 指定年龄是数字类型
                swim: PropTypes.func // 指定传递的类型必须是函数
            }

            static defaultProps = { // 指定默认值
                sex: "男男男",
                age: 888
            }
            
            state = {} // state仓库用来存放数据

            render() { // render用来渲染一个虚拟DON
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>年龄：{this.props.age}</li>
                        <li>家乡：{this.props.sex}</li>
                    </ul>
                )
            }
        }


        let info = { name: "孙悟空", age: 500, sex: '男' }
        // 通过...语法把数据传递子组件，然后通过react工具就能看到了，组件中通过this就能访问到了
        ReactDOM.render(<Lss  {...info} />, document.querySelector('#test'))

        ReactDOM.render(<Lss name="猪八戒" />, document.querySelector('#test1'))

        function swim() {
            console.log('I can swim');
        }

        // 通过react工具，也可以看到这个虚拟函数
        // console.log('打印看虚拟DOM，看函数', <Lss name="沙和尚" age={1000} swim={swim} />);
        ReactDOM.render(<Lss name="沙和尚" age={1000} swim={swim} />, document.querySelector('#test2'))

        /* prop是只读的，不允许修改
           类中的构造器constructor一般不用写，能省略就省略
           函数式组件只能使用props，不能使用state和ref，所以函数式组件比较功能比较少，所以一般不用函数式组件
           所以是使用对象式组件
           
        */ 
    </script>
</body>

</html>